<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>多个背景</title>


    <style>
        body{
            margin: 0;
        }

        /* 效果：背景图高度固定，然后宽度按比例缩放，缩放后宽度肯定会不等于屏幕宽度，然后要求图片横向居中显示
        换句话说就是：图片等比缩放，图片纵向完全展示，横向居中
        
        */

        .bg {
            height: 400px;

            /*可以调整页面缩放百分比看看图片的变化*/
            background: url('./bg2.jpg')  center/auto 100%;
        }


        .test{
            width: 100px;
            height: 100px;
            border: 20px solid red;
            border-radius: 50%;

        }


    </style>

</head>

<body>
    <div class="bg" ></div>

    <div class="test"></div>

</body>

</html>